<template>
  <div>
    <div class="content">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="首页广告链接" class="form-header">
          <el-input
            v-model="formInline.homeLink"
            placeholder="首页广告链接"
          ></el-input>
        </el-form-item>
        <el-form-item label="广告图片" class="form-header">
          <ImageUpload :limit="1" :fileLists="fileList" @handleUploadSuccess="handleUploadSuccess">
          </ImageUpload>
          <!-- <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="queding">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button type="primary" plain @click="$emit('handleCancle')"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
import { listAllUser } from "@/api/caiwu/zhgl";
import { add, edit } from "@/api/sygg/home";
import { mapState } from "vuex";
export default {
  name: "zhanghugai",
  data() {
    return {
      formInline: {
        // homeId: "",
        homeIcon: "",
        homeLink: "",
      },
      fileSize: 5,
      fileType: ["png", "jpg", "jpeg"],
      // dialogVisible: false,
      // disabled: false,
      fileList: [],
      userList: [],
      dialogImageUrl: "",
    };
  },
  computed: {
    ...mapState(["user"]),
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  props: {
    // 编辑数据
    objData: {
      type: Object,
      default: () => {},
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // 根据用户角色判断当前用户是否管理员角色，是则可下拉选择全量用户，否则是普通用户，使用当前用户id
    if ("admin".includes(this.user.roles)) {
      this.getList();
      // this.formInline.userId = this.user.id;
    }
    // 是否是编辑
    if (this.isEdit) {
      this.formInline = this.objData;
      this.fileList.push({
        name: this.objData.homeId,
        url: this.objData.homeIcon,
      });
    } else {
      this.resetForm();
    }
  },
  methods: {
    // 上传图片
    handleUploadSuccess(fileList) {
      this.fileList = fileList;
      this.formInline.homeIcon = fileList[0].url;
    },
    /** 查询用户列表 */
    getList() {
      listAllUser({}).then((res) => {
        res.data.forEach((item) => {
          this.userList.push({
            userName: item.userName,
            userId: item.userId,
          });
        });
      });
    },
    // TODO: 新增、编辑提交
    handleSubmit() {
      let apiUrl = this.isEdit ? edit : add;
      // let params = this.isEdit
      //   ? {
      //       ...this.formInline,
      //       trendsId: this.objData.trendsId,
      //     }
      //   : this.formInline;
      apiUrl(this.formInline).then((res) => {
        if (res.code === 200) {
          this.$emit("handleCancle");
        }
      });
    },
    // 重置表单
    resetForm() {
      this.formInline = {
        // userId: this.user.id,
        // homeId: "",
        homeIcon: "",
        homeLink: "",
      };
    },
  },
};
</script>
<style scoped>
.queding {
  padding-bottom: 28px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  width: 34%;
  margin: 0 auto;
}
.form-header {
  width: 492px;
  border: none;
}
.slect {
  width: 204px;
}
.content {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
}
</style>
